<template>
	<view class="conInput" :style="`height:${commentStore.isShowInp?7.25*vh+keyBoardHeight:7.25*vh+safeBottom}px;`">
		<view class="myAvatar">
			<image :src="userInf.avatarUrl" mode="aspectFill"></image>
		</view>
		<textarea style="font-size: 30rpx;" :placeholder="replyPlaceholder" confirm-type="send" :cursor-spacing="10" v-model="commentContext"
			@confirm="sumbitComment" :focus='commentStore.isShowInp' @blur="inputBlur" :adjust-position="false"
			@click="commentStore.handleInp(true)" :maxlength='-1' :fixed='true' :show-confirm-bar='false'
			@keyboardheightchange='keyboardheightchange' />
		<van-button @click="sumbitComment" icon="chat-o" type="primary" />
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		inject
	} from "vue";
	import {
		onShow,
	} from '@dcloudio/uni-app'
	import {
		useCommentStore,
		useUserStore
	} from "@/store";
	const userInf = useUserStore().userInf
	const commentStore = useCommentStore();
	const props = defineProps({
		postId: Number,
		username: String,
	});
	const emits = defineEmits(["submit"]);
	//------
	const vh = ref(0)
	const safeBottom = ref(0)
	const keyBoardHeight = ref(0)
	onShow(() => {
		console.log('show')
		const globalData = inject('globalData')
		vh.value = globalData.vh
		safeBottom.value = globalData.safeBottom
		// uni.getSystemInfo({
		// 	success: (res) => {
		// 		vh.value = res.windowHeight / 100 //单位px
		// 		// safeBottom.value = res.safeAreaInsets.bottom; //屏幕底部安全距离
		// 	}
		// })
		// uni.onKeyboardHeightChange((res) => {
		// 	keyBoardHeight.value = res.height === 0 ? 0 : res.height // 键盘高度（变化）存储
		// });
	})
	const keyboardheightchange = (e) => {
		keyBoardHeight.value = e.detail.height // 键盘高度（变化）存储
	}
	const inputBlur = () => {
		console.log('blur')
		commentStore.handleInp(false)
		if (!commentContext.value)
			commentStore.setTarget('', props.postId, null)
	}
	//-------
	const commentContext = ref("");
	const changeValue = (e) => {
		commentContext.value = e.detail;
	};
	const replyPlaceholder = computed(() => commentStore.target ? `回复 ${commentStore.target}` : '发表评论:');

	const sumbitComment = () => {
		if (commentContext.value === "") {
			return console.log("评论内容不能为空");
		}
		commentStore.reply(commentContext.value).then((res) => {
			console.log(res)
			if (res.status === 200) {
				commentContext.value = "";
				emits("submit");
				// commentStore.setTarget('', props.postId, null)
			}
		});
	};
</script>

<style lang="less" scoped>
	.conInput {
		background-color: #f7f7f7;
		width: 100%;
		display: flex;
		padding-top: 0.75vh;
		justify-content: center;
		position: absolute;
		bottom: 0;
		// padding-top:constant(safe-area-inset-bottom);//ios底部黑安全距离
		// padding-top: env(safe-area-inset-bottom);
		// box-sizing: content-box;

		.myAvatar {
			height: 6.5vh;
			width: 6.5vh;
			border-radius: 10rpx;
			margin-right: 10rpx;
			overflow: hidden;

			image {
				height: 100%;
				width: 100%;

			}
		}

		textarea {
			padding-left: 10rpx;
			background-color: #ffffff;
			color: #737373;
			border-radius: 10rpx;
			height: 6vh;
			width: 580rpx;
		}
	}
</style>